<template>
	<div class="maintain">
		<x-header>联系信息
      <a href="javascript:;" class="save" @click="saveAction(submitType)">保存</a>
		  <a href="javascript:;" class="submit" @click="submitAction">提交</a>
    </x-header>
    <div style="background-color: #f7f7f7;height: 0.2778rem;widht: 100%;"></div>
		<div class="maintainContent">
      <div class="information-item">
        <div class="information-item-title">联系人</div>
        <input class="information-item-input" v-model="CONTACT_NAME" type="text" maxlength="16" placeholder="请录入" value="">
      </div>
      <div class="information-item">
        <div class="information-item-title">联系类型</div>
         <popup-picker class="information-item-input" :data="CONTACT_TYPE_LIST" v-model="CONTACT_TYPE" show-name @on-change="onPopupChange($event,'CONTACT_TYPE')" placeholder="请选择"></popup-picker>
        <!-- <img  class="information-item-rightImg" src="../../assets/img/securityCheckImg/rightArrow.png" alt=""> -->
      </div>
      <div class="information-item">
        <div class="information-item-title">户主关系</div>
         <popup-picker class="information-item-input" :data="RELATION_LIST" show-name v-model="RELATION" @on-change="onPopupChange($event,'RELATION')" placeholder="请选择"></popup-picker>
        <!-- <img  class="information-item-rightImg" src="../../assets/img/securityCheckImg/rightArrow.png" alt=""> -->
      </div>
      <div class="information-item">
        <div class="information-item-title">联系方式</div>
         <popup-picker class="information-item-input" :data="CONT_CHANL_TYPE_LIST" show-name v-model="CONT_CHANL_TYPE" @on-change="onPopupChange($event,'CONT_CHANL_TYPE')" placeholder="请选择"></popup-picker>
        <!-- <img  class="information-item-rightImg" src="../../assets/img/securityCheckImg/rightArrow.png" alt=""> -->
      </div>
      <div class="information-item">
        <div class="information-item-title">联系号码</div>
        <input class="information-item-input" v-model="CONT_CHANL_NO" type="text" maxlength="16" placeholder="请录入" value="">
      </div>
      <div class="information-item">
        <div class="information-item-title">证件类型</div>
         <popup-picker class="information-item-input" :data="CERT_TYPE_LIST" show-name v-model="CERT_TYPE" @on-change="onPopupChange($event,'CERT_TYPE')" placeholder="请选择"></popup-picker>
        <!-- <img  class="information-item-rightImg" src="../../assets/img/securityCheckImg/rightArrow.png" alt=""> -->
      </div>
      <div class="information-item">
        <div class="information-item-title">证件号码</div>
        <input class="information-item-input" v-model="CERT_NUM" type="text" maxlength="16" placeholder="请录入" value="">
      </div>
      <div class="information-item">
        <div class="information-item-title">证件照片</div>
      </div>
    </div>
    <div class="information-images">
      <div class="information-image information-image-positive" v-if="photoPathZ == ''" @click="takePhoto($event,1)">
        <img class="information-image-icon" src="../../assets/img/securityCheckImg/camera.png" alt="">
        <div class="information-image-text">证件正面照</div>
      </div>
      <div class="information-image information-image-positive information-image-path" v-else>
        <img  class="information-image-iconDelete" @click="removePhoto($event,1)" src="../../assets/img/securityCheckImg/deletephoto.png" alt="">
        <img class="information-image-iconPath" :src="photoPathZ" alt="">
      </div>
      <div class="information-image information-image-nopositive" v-if="photoPathF == ''" @click="takePhoto($event,2)">
        <img class="information-image-icon" src="../../assets/img/securityCheckImg/camera.png" alt="">
        <div class="information-image-text">证件反面照</div>
      </div>
      <div class="information-image information-image-positive information-image-path" v-else>
        <img  class="information-image-iconDelete" @click="removePhoto($event,2)" src="../../assets/img/securityCheckImg/deletephoto.png" alt="">
        <img class="information-image-iconPath" :src="photoPathF" alt="">
      </div>
    </div>
    <div class="information-addIcon">
      <div class="information-addIcon-div" @click="addIconClick">
        <img class="information-addIcon-icon" src="../../assets/img/securityCheckImg/addHeader.png" alt="">
      </div>
    </div>
	</div>
</template>

<script>
import { XHeader, PopupPicker } from "vux";
import Vue from "vue";
import { getsn, getYYYYMM, getFileYYYYMMDDHH24MISS } from "@/utils/getsn";
import {
  sqlInsert,
  sqlUpdata,
  sqlUpdataChange,
  sqlFILE_Query,
  sqlFILE_Insert,
  sqlFILE_Delete,
  sqlFILE_QueryAll,
  takePhotoAll,
  submitremoval
} from "@/utils/sqlOperation";
import { takePhoto, deletePhoto, UserInfo } from "@/utils/public";

export default {
  data() {
    return {
      CONTACT_NAME: "", //联系人
      CONT_CHANL_NO: "",
      CERT_NUM: "",
      CONTACT_TYPE: [],
      CONTACT_TYPE_LIST: [], //联系人类型
      CERT_TYPE: [],
      CERT_TYPE_LIST: [], //证件类型
      RELATION: [],
      RELATION_LIST: [], //户主关系
      CONT_CHANL_TYPE: [],
      CONT_CHANL_TYPE_LIST: [], //联系方式
      change_type: 1,
      CONS_NO: "",
      APP_NO: "",
      photoPathZ: "",
      photoPathF: "",
      photoPathType: "",
      FILE: [],
      FILE_LIST: [],
      M_CID: "",
      submitType: 1
    };
  },
  components: {
    XHeader,
    PopupPicker
  },
  mounted() {
    Vue.set(this, "CONS_NO", this.$route.query.CONS_NO);
    console.log(
      "************************编辑联系信息start**********************"
    );
    const _this = this;
    if (_this.$route.query.item) {
      const item = JSON.parse(_this.$route.query.item);
      _this.M_CID = item.M_CID;
      _this.CONS_NO = item.CONS_NO;
      _this.CONTACT_NAME = item.CONTACT_NAME;
      _this.CONT_CHANL_NO = item.CONT_CHANL_NO;
      _this.CERT_NUM = item.CERT_NUM;
      _this.CONTACT_TYPE[0] = item.CONTACT_TYPE;
      _this.CERT_TYPE[0] = item.CERT_TYPE;
      _this.RELATION[0] = item.RELATION;
      _this.CONT_CHANL_TYPE[0] = item.CONT_CHANL_TYPE;
      Vue.set(_this, "change_type", _this.$route.query.change_type);
      sqlFILE_QueryAll(
        "CONTACT_FILE_RELATION",
        "CONTACT_CID",
        item.M_CID,
        _this.queryPhotoCallback
      );
    }
    console.log(
      "************************编辑联系信息end**********************"
    );
    // 户主关系
    AndroidApi.queryTableData(
      '{"whereClause":"select * from P_CODE where code_type= ?","whereArgs":["bpRelation"]}',
      function(msg) {
        if (msg.resultCode === "9999") {
          const RELATION_LIST = msg.result.map(item => {
            return {
              name: item.CODE_NAME,
              value: item.CODE_VALUE
            };
          });
          Vue.set(_this, "RELATION_LIST", [RELATION_LIST]);
        }
      }
    );
    // 联系信息类型
    AndroidApi.queryTableData(
      '{"whereClause":"select * from P_CODE where code_type= ?","whereArgs":["bpContChanType"]}',
      function(msg) {
        if (msg.resultCode === "9999") {
          const CONT_CHANL_TYPE_LIST = msg.result.map(item => {
            return {
              name: item.CODE_NAME,
              value: item.CODE_VALUE
            };
          });
          Vue.set(_this, "CONT_CHANL_TYPE_LIST", [CONT_CHANL_TYPE_LIST]);
        }
      }
    );
    // 联系人类型
    AndroidApi.queryTableData(
      '{"whereClause":"select * from P_CODE where code_type= ?","whereArgs":["bpContactMode"]}',
      function(msg) {
        if (msg.resultCode === "9999") {
          const CONTACT_TYPE_LIST = msg.result.map(item => {
            return {
              name: item.CODE_NAME,
              value: item.CODE_VALUE
            };
          });
          Vue.set(_this, "CONTACT_TYPE_LIST", [CONTACT_TYPE_LIST]);
        }
      }
    );
    // 证件类型
    AndroidApi.queryTableData(
      '{"whereClause":"select * from P_CODE where code_type= ?","whereArgs":["cdReCertType"]}',
      function(msg) {
        if (msg.resultCode === "9999") {
          const CERT_TYPE_LIST = msg.result.map(item => {
            return {
              name: item.CODE_NAME,
              value: item.CODE_VALUE
            };
          });
          Vue.set(_this, "CERT_TYPE_LIST", [CERT_TYPE_LIST]);
        }
      }
    );
  },
  methods: {
    queryPhotoCallback(result) {
      if (result.length != 0) {
        for (let i in result) {
          if (result[i].DIRECTION_TYPE == "1") {
            Vue.set(this, "photoPathZ", result[i].FILE_SRC);
          } else {
            Vue.set(this, "photoPathF", result[i].FILE_SRC);
          }
        }
      }
      Vue.set(this, "FILE_LIST", JSON.parse(JSON.stringify(result)));
      Vue.set(this, "FILE", JSON.parse(JSON.stringify(result)));
    },
    //图片上传
    takePhoto(event, type) {
      Vue.set(this, "photoPathType", type);
      takePhotoAll(this.takePhotoCallback);
    },
    takePhotoCallback(result) {
      if (this.photoPathType == 1) {
        Vue.set(this, "photoPathZ", result.path);
        this.FILE.push({
          FILE_ID: new Date().getTime() + "",
          PATH: result.path,
          DIRECTION_TYPE: "1"
        });
      } else {
        Vue.set(this, "photoPathF", result.path);
        this.FILE.push({
          FILE_ID: new Date().getTime() + "",
          PATH: result.path,
          DIRECTION_TYPE: "2"
        });
      }
    },
    removePhoto(event, type) {
      for (let i in this.FILE) {
        if (this.FILE[i].DIRECTION_TYPE == type) {
          this.FILE.splice(i, 1);
        }
      }
      if (type == 1) {
        Vue.set(this, "photoPathZ", "");
      } else {
        Vue.set(this, "photoPathF", "");
      }
    },
    photoFileCallback(str, msg) {
      console.log(11111, str, msg);
    },
    addIconClick() {
      this.CONTACT_NAME = "";
      this.CERT_NUM = "";
      this.CONT_CHANL_NO = "";
      this.CONTACT_TYPE = [];
      this.CERT_TYPE = [];
      this.RELATION = [];
      this.CONT_CHANL_TYPE = [];
      this.FILE = [];
      Vue.set(this, "photoPathZ", "");
      Vue.set(this, "photoPathF", "");
      Vue.set(this, "change_type", 1);
    },
    onPopupChange(val, str) {
      switch (str) {
        case "CONTACT_TYPE":
          this.CONTACT_TYPE = val;
          break;
        case "CERT_TYPE":
          this.CERT_TYPE = val;
          break;
        case "RELATION":
          this.RELATION = val;
          break;
        case "CONT_CHANL_TYPE":
          this.CONT_CHANL_TYPE = val;
          break;
        default:
          break;
      }
    },
    fileFunction() {
      const _this = this;
      _this.$vux.loading.show({
        text: "加载中"
      });
      for (let i in this.FILE) {
        let fileName =
          "/IMG/" +
          getYYYYMM() +
          "/" +
          "" +
          "_" +
          _this.CONS_NO +
          "_" +
          "1202" +
          "_" +
          getFileYYYYMMDDHH24MISS();
        AndroidApi.insert(
          JSON.stringify({
            tableName: "FILE_RECORDE",
            contentValues: [
              {
                FILE_ID: _this.FILE[i].FILE_ID,
                APP_NO: "",
                CONS_NO: _this.CONS_NO,
                FILE_SRC: _this.FILE[i].PATH,
                FILE_NAME: fileName,
                ITEM_NO: "1202",
                BUSY_NO: "0"
              }
            ]
          }),
          function(msg) {
            if (msg.resultCode === "9999") {
              _this.$vux.loading.hide();
            } else {
              errorCall("error", msg);
            }
          }
        );
      }
    },
    fileInsert(M_CID) {
      if (this.FILE.length == 2) {
        this.fileFunction();
        for (let i in this.FILE) {
          const fileData = [
            {
              M_CID: getsn(),
              CONTACT_CID: M_CID,
              FILE_ID: this.FILE[i].FILE_ID,
              DIRECTION_TYPE: this.FILE[i].DIRECTION_TYPE
            }
          ];
          sqlFILE_Insert(
            "CONTACT_FILE_RELATION",
            fileData,
            this.photoFileCallback
          );
        }
      } else if (this.FILE.length != 0) {
        this.$vux.toast.text("请上传证件正反面照片");
        return;
      }
    },
    saveAction(type) {
      const _this = this;
      Vue.set(_this, "submitType", type);
      if (this.change_type == 2) {
        let CUST_CONTACTINFO_DATA = [
          {
            CHANGE_TYPE: type == 2 ? "3" : "2",
            CONTACT_NAME: this.CONTACT_NAME,
            CONTACT_TYPE: this.CONTACT_TYPE[0],
            RELATION: this.RELATION[0],
            CERT_TYPE: this.CERT_TYPE[0],
            CERT_NUM: this.CERT_NUM
          }
        ];
        let CONT_CHANL_DATA = [
          {
            CHANGE_TYPE: type == 2 ? "3" : "2",
            CONT_CHANL_TYPE: this.CONT_CHANL_TYPE[0],
            CONT_CHANL_NO: this.CONT_CHANL_NO
          }
        ];

        if (this.FILE.length == 2) {
          for (let i in this.FILE) {
            deletePhoto(this.FILE[i].FILE_SRC, function(msg) {
              console.log(msg);
            });
            sqlFILE_Delete(
              "CONTACT_FILE_RELATION",
              this.FILE[i].FILE_ID,
              function(str, msg) {
                console.log(str, msg);
              }
            );
          }
          this.fileInsert(JSON.parse(this.$route.query.item).M_CID);
        } else if (this.FILE.length == 0) {
          console.log(this.FILE_LIST);
          for (let i in this.FILE_LIST) {
            deletePhoto(this.FILE_LIST[i].FILE_SRC, function(msg) {
              console.log(msg);
            });
            sqlFILE_Delete(
              "CONTACT_FILE_RELATION",
              this.FILE_LIST[i].FILE_ID,
              function(str, msg) {
                console.log(str, msg);
              }
            );
          }
        } else if (this.FILE.length != 0) {
          this.$vux.toast.text("请上传证件正反面照片");
          return;
        }
        if (this.M_CID) {
          //修改
          sqlUpdata(
            "CUST_CONTACTINFO_CHANGE",
            JSON.parse(this.$route.query.item).M_CID,
            this.CONS_NO,
            CUST_CONTACTINFO_DATA,
            this.callback
          );
          sqlUpdata(
            "CONT_CHANL_CHANGE",
            JSON.parse(this.$route.query.item).M_CID,
            this.CONS_NO,
            CONT_CHANL_DATA,
            this.callback
          );
        } else {
          //修改
          sqlUpdataChange(
            "CUST_CONTACTINFO",
            "CONTACT_ID",
            JSON.parse(this.$route.query.item).CONTACT_ID,
            this.CONS_NO,
            CUST_CONTACTINFO_DATA,
            this.callback
          );
          sqlUpdataChange(
            "CONT_CHANL",
            "CONTACT_ID",
            JSON.parse(this.$route.query.item).CONTACT_ID,
            this.CONS_NO,
            CONT_CHANL_DATA,
            this.callback
          );
        }
      } else {
        if (
          this.CONTACT_NAME == "" &&
          this.CERT_NUM == "" &&
          this.CONT_CHANL_NO == "" &&
          this.CONTACT_TYPE.length == 0 &&
          this.CERT_TYPE.length == 0 &&
          this.RELATION.length == 0 &&
          this.CONT_CHANL_TYPE.length == 0
        ) {
          this.$vux.toast.text("至少输入一个内容");
          return;
        }
        const M_CID = getsn();
        Vue.set(this, "M_CID", M_CID);
        let CUST_CONTACTINFO_DATA = [
          {
            CONTACT_ID: "",
            M_CID: M_CID,
            APP_NO: this.APP_NO,
            CHANGE_TYPE: type == 2 ? "3" : "1",
            CONS_NO: this.CONS_NO,
            CONTACT_NAME: this.CONTACT_NAME,
            CONTACT_TYPE: this.CONTACT_TYPE[0],
            RELATION: this.RELATION[0],
            CERT_TYPE: this.CERT_TYPE[0],
            CERT_NUM: this.CERT_NUM
          }
        ];
        let CONT_CHANL_DATA = [
          {
            CONS_C_CHANL_ID: "",
            CONTACT_ID: "",
            M_CID: M_CID,
            APP_NO: this.APP_NO,
            CHANGE_TYPE: type == 2 ? "3" : "1",
            CONS_NO: this.CONS_NO,
            CONT_CHANL_TYPE: this.CONT_CHANL_TYPE[0],
            CONT_CHANL_NO: this.CONT_CHANL_NO
          }
        ];
        sqlInsert(
          "CUST_CONTACTINFO_CHANGE",
          CUST_CONTACTINFO_DATA,
          this.callback
        );
        sqlInsert("CONT_CHANL_CHANGE", CONT_CHANL_DATA, this.callback);
        this.fileInsert(M_CID);
      }
    },
    callback(str, msg) {
      if (this.submitType == 1) {
        if (msg.resultCode === "9999") {
          if (str == "sqlInsert") {
            this.$vux.toast.text("添加成功");
          } else if (str == "sqlUpdata" || str == "sqlUpdataChange") {
            this.$vux.toast.text("修改成功");
          }
        } else {
          this.$vux.toast.text("失败");
        }
      } else {
        this.$vux.toast.text("提交成功");
      }
    },
    submitAction() {
      let data = "";
      if (this.M_CID) {
        const M_CID = this.M_CID;
        data = {
          CUST_CONTACTINFO: [
            {
              CERT_TYPE: this.CERT_TYPE[0],
              CERT_NO: this.CERT_NUM,
              CONTACT_ID: "",
              M_CID: M_CID,
              CONS_NO: this.CONS_NO,
              CONTACT_NAME: this.CONTACT_NAME,
              RELATION: this.RELATION[0],
              SEX: "",
              CONTACT_TYPE: this.CONTACT_TYPE[0],
              CONTACT_PRIO: Math.max() + 1,
              REMARK: "",
              ORG_NO: UserInfo.ORG_NO,
              CONT_CHANL: [
                {
                  CONS_C_CHANL_ID: "",
                  CONTACT_ID: "",
                  CONS_NO: this.CONS_NO,
                  CONT_CHANL_TYPE: this.CONT_CHANL_TYPE[0],
                  CONT_CHANL_NO: this.CONT_CHANL_NO,
                  PRIORITY: "1"
                }
              ]
            }
          ]
        };
      } else {
        const item = JSON.parse(this.$route.query.item);
        data = {
          CUST_CONTACTINFO: [
            {
              CERT_TYPE: this.CERT_TYPE[0],
              CERT_NO: this.CERT_NUM,
              CONTACT_ID: item.CONTACT_ID,
              M_CID: getsn(),
              CONS_NO: this.CONS_NO,
              CONTACT_NAME: this.CONTACT_NAME,
              RELATION: this.RELATION[0],
              SEX: "",
              CONTACT_TYPE: this.CONTACT_TYPE[0],
              CONTACT_PRIO: Math.max() + 1,
              REMARK: "",
              ORG_NO: UserInfo.ORG_NO,
              CONT_CHANL: [
                {
                  CONS_C_CHANL_ID: item.CONS_C_CHANL_ID,
                  CONTACT_ID: item.CONTACT_ID,
                  CONS_NO: this.CONS_NO,
                  CONT_CHANL_TYPE: this.CONT_CHANL_TYPE[0],
                  CONT_CHANL_NO: this.CONT_CHANL_NO,
                  PRIORITY: "1"
                }
              ]
            }
          ]
        };
      }
      submitremoval(data, "RCS021", this.submitActionCallback);
    },
    submitActionCallback(result) {
      if (result.resultCode === "9999") {
        this.saveAction(2);
      }
    }
  }
};
</script>

<style scoped lang="less">
@import "../../assets/less/style.less";
.maintain {
  background-color: #ffffff;
}
.maintainContent {
  padding: 0 0.2778rem;
  background-color: #ffffff;
  border-bottom: 1px solid #d9daeb;
}
</style>
<style>
@import "../../assets/less/vuxStyle.less";
</style>